<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="问题描述" name="des">
                <div class="detail">
                    <img class="image" src="../../../../assets/recur-hanoi/tower.png">
                    <div class="text">
                        汉诺塔问题是一个经典的问题。汉诺塔（Hanoi Tower），又称河内塔，源于印度一个古老传说。
                        大梵天创造世界的时候做了三根金刚石柱子，在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。
                        大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上。
                        并且规定，任何时候，在小圆盘上都不能放大圆盘，且在三根柱子之间一次只能移动一个圆盘。问应该如何操作？
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="相关研究" name="3">
                <ul>
                    <li v-for="item in thesisData" :key="item.title">
                        <a :href="item.link" target="_blank">
                            <div class="thesis">
                                <img class="thesis-cover" src="../../../../icons/thesis.svg" alt="">
                                <div class="thesis-title">
                                    {{item.title}}
                                </div>
                                <div class="thesis-author">
                                    <span>作者：</span>{{ item.author }}
                                </div>
                                <div class="thesis-time">
                                    <span>时间：</span>{{ item.time }}
                                </div>
                                <div class="thesis-source">
                                    <span>来源：</span>{{ item.source }}
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="应用场景" name="4">
                <div class="detail">
                    <img class="use" src="../../../../assets/recur-hanoi/hanoi.jpg" alt="">
                    <div class="text">
                        汉诺塔问题具有重要的算法思想和应用价值。
                        在计算机科学中，汉诺塔问题经常被用作算法设计和分析的基础问题，可以帮助我们理解递归、分治和栈等基本概念和算法技术。
                        此外，汉诺塔问题也被广泛应用于编译器、操作系统、数据库等计算机领域中的算法设计和优化，具有重要的实际意义。
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
// const handleChange = (val: string[]) => {
//     console.log(val)
// }

// 相关研究部分
const thesisData=[
    {
        title:"汉诺塔算法演示系统的设计和实现",
        author:"李健",
        time:"2011年",
        source:"百度学术",
        link:"https://xueshu.baidu.com/usercenter/paper/show?paperid=26f1674530b2cd6875034d225162c872&site=xueshu_se",
    },
    {
        title:"基于 Flash 的汉诺塔递归算法分析动画的设计与实现",
        author:"丁爽",
        time:"2016年",
        source:"百度学术",
        link:"https://xueshu.baidu.com/usercenter/paper/show?paperid=f66c0bd7ea21374a3949176bb421265b&site=xueshu_se&hitarticle=1",
    },
    {
        title:"汉诺塔问题的算法分析及C语言实现",
        author:"周敏",
        time:"2009年",
        source:"百度学术",
        link:"https://xueshu.baidu.com/usercenter/paper/show?paperid=58476e89ca43222baf3fe2e2e86d62d3&site=xueshu_se",
    },

]
</script>

<style scoped lang="scss">
* {
    list-style: none;
}
.image {
    border-radius: 10px;
}
a {
	text-decoration: none; /* 去除默认的下划线 */
	outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
	color: #000;	/* 去除默认的颜色和点击后变化的颜色 */ 
}

.detail {
    display: flex;
    justify-content: center;
    align-items: end;

    .text {
        margin-left: 10px;
        cursor: default;
    }

    .use {
        width: 240px;
        height: 150px;
        border-radius: 10px;
    }
}

// 相关研究部分
.thesis {
    width: 98%;
    position: relative;
    left: 20px;
    margin-bottom: 10px;
    font-weight: normal;
    background:#F5F5F5;
    border-radius: 10px;
    transition: all 0.2s linear;
    .thesis-title {
        position: absolute;
        top: 0;
        left: 5px;
    }
  
    .thesis-author {
        position: absolute;
        top: 25px;
        left: 120px;
    }

    .thesis-time {
        position: absolute;
        top:45px;
        left: 120px;
    }
    .thesis-source {
        position: absolute;
        top: 65px;
        left: 120px;
    }
    &:hover {
        cursor: pointer;
        transform: translateX(-15px);
    }
}
</style>